<template>
  <div class="pulldownState">
    <div v-if="rotate < 0" class="circle_warp">
        <div class="wrapper right">
            <div class="circleProgress rightcircle" v-show="pulldownStatus === 'down' || pulldownStatus === 'up'" :style="{ transform: 'rotate(' + rotate * 6 + 'deg)' }"></div>
            <div class="circleProgress rightcircle rotateAnimation" v-show="pulldownStatus === 'loading' || pulldownStatus === 'default'"></div>
        </div>
        <div class="wrapper left">
            <div class="circleProgress leftcircle"></div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pulldownStatus: {
      type: String,
      default: 'default'
    },
    rotate: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {

    }
  },
  watch: {

  },
  methods: {

  },
  created () {

  },
  mounted () {

  }
}
</script>
<style scoped lang="less">
.pulldownState {
  position: absolute;
  height: 60px;
  text-align: center;
  width: 100%;
  line-height: 60px;
}
.circle_warp {
  width: 30px;
  height: 30px;
  margin: 5px auto;
  position: relative;
}
.wrapper{
    width: 30px;
    height: 30px;
    position: absolute;
    top:0;
    overflow: hidden;
}
.right{
    right:0;
}
.left{
    left:0;
}
.circleProgress{
    width: 15px;
    height: 15px;
    border:2px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
}
.rightcircle{
    border-top:2px solid #4D63EB;
    border-right:2px solid #4D63EB;
    right:0;
}
.rotateAnimation {
  animation: rotate 1s infinite;
}

@keyframes rotate
{
  from {transform:rotate(0deg);}
  to {transform:rotate(720deg)}
}

</style>

